<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/reset.css">
    <style>
        body {
            height: 2000px;
        }
        .go2top {
            width: 50px;
            height: 50px;
            background-color: red;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
        }
    </style>

    <script src="../lib/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function() {
            var $go2top = $('.go2top');
            $go2top.on('click', function() {
                $('body').animate({scrollTop: 0}, 500);
                // $(window).scrollTop(0);
            });
            $(window).on('scroll', function() {
                var $this = $(this);
                var h = $this.height();
                var st = $this.scrollTop();
                
                if (st > h) {
                    $go2top.slideDown();
                } else {
                    $go2top.slideUp();
                }
            })
        });
    </script>
</head>
<body>

    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
        <li>item16</li>
        <li>item17</li>
        <li>item18</li>
        <li>item19</li>
        <li>item20</li>
        <li>item21</li>
        <li>item22</li>
        <li>item23</li>
        <li>item24</li>
        <li>item25</li>
        <li>item26</li>
        <li>item27</li>
        <li>item28</li>
        <li>item29</li>
        <li>item30</li>
        <li>item31</li>
        <li>item32</li>
        <li>item33</li>
        <li>item34</li>
        <li>item35</li>
        <li>item36</li>
        <li>item37</li>
        <li>item38</li>
        <li>item39</li>
        <li>item40</li>
        <li>item41</li>
        <li>item42</li>
        <li>item43</li>
        <li>item44</li>
        <li>item45</li>
        <li>item46</li>
        <li>item47</li>
        <li>item48</li>
        <li>item49</li>
        <li>item50</li>
    </ul>
    
    <div class="go2top">
        
    </div>

</body>
</html>